<template>
  <div class="videoItem">
    <img
        @load="imgLoad"
        style="cursor: pointer;max-height: 300px;max-width: 400px"
        :src="paths[1]+'?w=500'"
    >
    <div class="play" @click="playOpen(paths[0],paths[0])">
      <el-icon size="50">
        <video-play/>
      </el-icon>
    </div>
  </div>
  <my-video-play ref="play" v-model="playVisible">
  </my-video-play>
</template>

<script lang="ts" setup>
import {PropType, ref,computed} from "vue";
import {IChatMessage} from "@/api/types/chat";
import MyVideoPlay from '@/views/static/component/VideoPlay.vue'

const play = ref<any>();
const playVisible = ref(false);

const props = defineProps({
  item: {
    type: Object as PropType<IChatMessage | null>,
    default: () => {
    }
  }
});


const playOpen = (path: string, name: string) => {
  play.value.playVideo(path, name)
  playVisible.value = true
}

const paths = computed(() => {
  return props.item?.message!.split(',')
})

interface IEmitsType {
  (e: 'imgLoad', num: number): void;
}
const emit = defineEmits<IEmitsType>();

const imgLoad = (e:any) => {
  const elm= e.path[1] as HTMLElement
  emit('imgLoad',elm.offsetTop+elm.offsetHeight)
}
</script>

<style lang="scss" scoped>
div.videoItem {
  position: relative;

  div.play {
    cursor: pointer;
    position: absolute;
    background: rgba(37, 46, 80, 0.8);
    width: 50px;
    height: 50px;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    border-radius: 50%;
    transition: all 0.3s;
    i {
      color: #c3e3e3
    }

    &:hover {
      background: #4d42e3;
      & > i {
        color: #21dcb9;
      }
    }
  }

}
</style>
